import React from 'react';

export default class HighCharts extends React.Component{
    constructor(props, context) {
        super(props, context)
    }
    componentDidMount() {
        var seriesData = new Array(this.props.surveyResult.Names.length);
        for (var i = 0; i < seriesData.length; i++) {
            seriesData[i] = {};
            seriesData[i].name = this.props.surveyResult.Names[i];
            seriesData[i].y = this.props.surveyResult.Values[i];
            seriesData[i].color = this.props.surveyResult.Colors[i];
        }
        $(this.refs.highchart).highcharts({
            chart: {
                backgroundColor: '#FFFFFF',
                type: 'bar',
                animation: false,
                height: (seriesData.length * 30 + 80 )
            },
            title: {
                text: null
            },
            xAxis: {
                tickWidth:0,
                lineColor:'#263f6a',
                lineWidth:2,
                startOnTick:true,
                categories: this.props.surveyResult.Names,
                title: {
                    text: null,
                },
                labels: {
                    align: "left",
                    x:3,
                    y:-12,
                    useHTML: true,
                    style: {
                        whiteSpace: "nowrap",
                        overflow: "hidden",
                        textOverflow: "ellipsis",
                        fontSize: '12px',
                        fontFamily: 'Arial',
                        fontWeight:'bold',
                        color: '#263f6a'
                    }
                },
            },
            yAxis: {
                allowDecimals: false,
                lineColor:'#263f6a',
                lineWidth:1,
                title:null,
                labels: {
                    enabled:false
                }
            },
            tooltip: {
                enabled : false
            },
            plotOptions: {
                bar: {
                    pointWidth:18,
                    pointPadding:1,
                    groupPadding:0.05,
                    dataLabels: {
                        enabled: true,
                        align: 'right',
                        y:0,
                        format: '{y}',
                        inside: true,
                        color: '#FFFFFF',
                        style: {
                            fontSize: '12px',
                            fontFamily: 'Arial',
                            fontWeight:'bold'
                        }
                    }
                }
            },
            legend: {
                enabled: false
            },
            credits: {
                enabled: false
            },
            series: [{name: null, data : seriesData}]
        });
    }
    componentWillUnmount() {
        // Clean up work here.
    }
    shouldComponentUpdate() {
        // Let's just never update this component again.
        return false;
    }
    render(){
        return (
            <div>
                <div style={{textAlign:"left"}}>{this.props.surveyResult.Name}</div>
                <div ref="highchart"/>
            </div>
                );
    }
}